<template>
    <a-form class="PageContent" layout="horizontal" :label-col="labelCol">
        <Comps :Configs="RuleConfig" :Values="RuleValue" />
    </a-form>
    <Icons v-if="ShowIconChoose" @close="HideIconView" ref="IconsView" @ChooseIcon="ChooseIcon" />
</template>
<script setup>
import { inject, computed, ref, provide, watch, nextTick } from 'vue';
import Comps from '../FormConfig/Comps.vue'
import Icons from './Icons.vue'

const labelCol = { style: { width: '6em' } };
const StateEvent = inject('StateEvent');

const ShowIconChoose = ref(false);





const ShowIconView = function () {
    ShowIconChoose.value = true;
    nextTick(() => {
        IconsView.value.show()
    })
};
const HideIconView = function () {
    IconsView.value && IconsView.value.hide();
    setTimeout(() => {
        ShowIconChoose.value = false;
    }, 300)
};


let EventCache = null;
const IconsView = ref();
const SetChangeColorEvent = function (value, callback) {
    EventCache = callback;
    ShowIconView();
    nextTick(() => {
        IconsView.value.SetValue(value);
    })
    // ShowIconChoose.value = true;
}
const ChooseIcon = function (icon) {
    EventCache && EventCache(icon);
    HideIconView();
    // ShowIconChoose.value = false;
    EventCache = null;
}
provide('SetChangeColorEvent', SetChangeColorEvent)


watch(() => StateEvent.ActiveId.value, (val) => {
    HideIconView();
    // ShowIconChoose.value = false;
    EventCache = null;
})


const RuleValue = computed(() => {
    if (StateEvent.ActiveId.value) {
        return StateEvent.GetRuleById(StateEvent.ActiveId.value)
    } else {
        return null
    }
});


const RuleConfig = computed(() => {
    if (StateEvent.ActiveId.value) {
        var _config = StateEvent.GetRuleConfigById(StateEvent.ActiveId.value);
        return _config && _config.props();
    } else {
        return null
    }
});





</script>
<style scoped lang="less">
.PageContent {
    user-select: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    padding: 16px 0;

    :deep(.ant-form-item) {
        margin-bottom: 8px;
    }

    // :deep(.collapse ) {
    //     margin-top: 1px solid #ccc;
    // }


    :deep(.FormView) {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .button {
            flex: none;
            width: 32px;
            margin-left: 8px;

            .C-Icon {
                font-size: 14px;
                line-height: 18px;
            }
        }
    }
}
</style>